<template>
	<view class="container">
		<u-navbar :is-back="false">
			<view class="slot-wrap flex align-center">
				购物车
			</view>
		</u-navbar>
			<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in list" :key="index"
			 @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
				<!-- 商品 -->
				<view class="flex align-center" style="width: 100%;">
					<!-- checkbox -->
					<view class="checkbox-box" @tap.stop="selected(item)">
						<view class="checkbox">
							<view class="text-xxl" :class="[item.checked?'cuIcon-roundcheckfill text-red':'cuIcon-round text-gray']"></view>
						</view>
					</view>
					<!-- 商品信息 -->
					<view class="goods-info flex-sub flex align-stretch" @tap="toGoods(item)">
						<view class="image">
							<image src="../../static/images/banren.png" mode="aspectFill"></image>
						</view>
						<view class="info flex-sub flex flex-direction justify-between">
							<view class="title">
								<view class="name u-font-26">{{item.goods_name}}</view>
							</view>
							<view class="price-number flex align-center justify-between">
								<view class="text-price text-lg text-bold">{{item.price}}</view>
								<view class="number flex align-center">
									<view class="btn sub" :class="item.num <= 1?'disabled':''" @tap.stop="numberChange(0,item,index)">	
										<view class="cuIcon-move"></view>
									</view>
									<view class="input" @tap.stop="discard">
										<input type="number" :value="item.num" :disabled="true"/>
									</view>
									<view class="btn add" @tap.stop="numberChange(1,item,index)">
										<view class="cuIcon-add"></view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 删除按钮 -->
				<view class="move" @tap.stop="deleteb(item,index)">
					<view class="bg-red">删除</view>
				</view>
			</view>
		<!-- 底部提交 -->
		<view class="bottom-submit" :style="{bottom:footerbottom}">
			<view class="checkbox-box flex align-center" @tap.stop="allSelect">
				<view class="checkbox">
					<view class="text-xxl" :class="[get_is_full_check?'cuIcon-roundcheckfill text-red':'cuIcon-round text-gray']"></view>
				</view>
				<view class="selectAll">全选</view>
			</view>
			<view style="display: flex;align-items: center;">
				<view class="total">合计:<text class="text-xl" style="font-weight: bold;">￥{{allPrice}}</text></view>
				<view class="submit" @click="submit">
					结算
				</view>
			</view>

		</view>
	</view>
</template>

<script>
export default {
    data() {
        return {
            number: 1,
            is_show: false,
            footerbottom: 0,
            allPrice: 0,
            list:[
                {
                    id:'0',
                    checked:0,
                    goods_name:'中华墨坊专辑01版',
                    price:'688',
                    num:2,
                },
                {
                    id:'1',
                    checked:1,
                    goods_name:'中华墨坊专辑01版',
                    price:'1',
                    num:1,
                },
				
            ],//所有商品
            msg: '',
            get_is_full_check: false,
            activePro: 0,
            productlist: [],
            	
            modalName: null,
            listTouchStart: 0,
            listTouchDirection: null,
        };
    },
    onLoad() {
        //兼容H5下结算条位置
        // #ifdef H5
        this.footerbottom = document.getElementsByTagName('uni-tabbar')[0].offsetHeight + 'px';
        // #endif
    },
    onShow() {
      
    },
    methods: {
      
        numberChange(data, item,inexd) {
            let that =this;
            if (data) {
                item.num++;
            } else {
                item.num--;
                if (item.num < 1) {
                    uni.showModal({
            		    content: '你确定要删除这个商品吗？',
            		    success: function (res) {
            		        if (res.confirm) {
                                that.list.splice(inexd,1);
                                // that.editCount(item.id, 0, 'del');
            		        } else if (res.cancel) {
                                item.num=1;
            		        }
            		    }
                    });
            		return false;
                }
            }
        },
        submit() {
            // if (this.activePro>0) {
			    uni.navigateTo({
			        url: '/pages/index/pay'
			    });
       //      } else {
			    // uni.showToast({
			    //     title: '请先选择要结算的餐品',
			    //     icon: 'none'
			    // });
       //      }
        },
        // 选中商品
        selected(item) {
		    item.checked=!item.checked;
            this._totalPrice();
        },
        //全选
        allSelect() {
            let is_selected = !this.get_is_full_check;
            this.get_is_full_check = is_selected;
            this.list.map(function(item) {
                item.checked = is_selected;		       
            });
        },
       
        // ListTouch触摸开始
        ListTouchStart(e) {
        	    this.listTouchStart = e.touches[0].pageX;
        },			
        // ListTouch计算方向
        ListTouchMove(e) {
        	    this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > -100 ? 'right' : 'left';
        },			
        // ListTouch计算滚动
        ListTouchEnd(e) {
        	    if (this.listTouchDirection == 'left') {
        	        this.modalName = e.currentTarget.dataset.target;
        	    } else {
        	        this.modalName = null;
        	    }
        	    this.listTouchDirection = null;
        },
        deleteb(data, item) {
            let that = this;
            uni.showModal({
			    content: '你确定要删除这个商品吗？',
			    success: function (res) {
			        if (res.confirm) {
                        that.list.splice(data,1);
			            // that.editCount(item.id, 0, 'del');
			        } else if (res.cancel) {
			            item.num=1;
			        }
			    }
            });
            return false;
        },
    }
};
</script>

<style>
	.container {
		background-color: #F8F8F8;
	}
	.cu-item {
		border-top: 2rpx #F5F5F5 solid;
		background-color: #FFFFFF;
		
		display: flex;
		transition: all .6s ease-in-out 0s;
		transform: translateX(0upx);
		
	}
	.cu-item>.flex{
		padding: 20rpx 25rpx;
	}
	.cu-item .list-commodity {
		flex: 1;
	}
	.cu-item.move-cur {
		transform: translateX(-200upx)
	}
	
	.cu-item .move {
		position: absolute;
		right: 0;
		display: flex;
		width: 200upx;
		height: 100%;
		transform: translateX(100%);
	}
	
	.cu-item .move view {
		display: flex;
		flex: 1;
		justify-content: center;
		align-items: center;
		background-color: #F23D3D;
		color: #FFFFFF;
		font-size: 32rpx;
	}
	
	/* 商品 */
	.image{
		margin: 0 20rpx;
	}
	.image image{
		width: 190rpx;
		height: 190rpx;
		border-radius: 15rpx;
	}
	.name{
		max-width: 420rpx;
		overflow:hidden;
		text-overflow:ellipsis;
		display:-webkit-box;
		-webkit-box-orient:vertical;
		-webkit-line-clamp:2;
	}
	.info{
		padding: 20rpx 0;
	}
	.price-number .text-price{
		color: #CC0001;
	}
	.number input{
		width: 80rpx;
		text-align: center;
	}
	.number .btn{
		background-color: #D8D8D8;
		color: #FFFFFF;
		border-radius: 50%;
		width: 40rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
	}
	.number .sub{
		background-color: #EFEFEF;
	}
	.number .sub view{
		font-size: 30rpx;padding-right: 1rpx;
	}
	.number view{
		font-size: 35rpx;
	}
	
	/* 底部提交 */
	.bottom-submit {
		width: 100%;
		position: fixed;
		height: 100rpx;
		bottom: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: #ECECEC 2rpx solid;
		padding: 10rpx 30rpx 10rpx 40rpx;
		background-color: #FFFFFF;
	}
	
	.selectAll {
		margin-left: 10rpx;
		color: #888888;
		font-size: 30rpx;
	}
	
	.total {
		color: #CC0001;
		font-size: 28rpx;
	}
	
	.discount {
		color: #4D4D4D;
		margin-left: -10rpx;
		transform: scale(0.933333)
	}
	
	.submit {
		width: 180rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		background-color: #CC0001;
		border-radius: 50rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		margin-left: 20rpx;
	}
	
	.narrow {
		transform: scale(0.833333)
	}
	.text-red{
		color: #CC0001;
	}
</style>
